<template>
  <div class="to-sign-up">
    <br />
    <div class="res-add-one">
      <div class="header_2">
        <ul>
          <li><div class="head-font"></div></li>
          <li><p>&nbsp; 角色管理</p></li>
          <el-button type="primary" style="float:right;"  @click="open">保存</el-button>
        </ul>
      </div>
<!-------------------------------------------第一个表格---------------------------------------------->
 <div class="res-add-two">
     <!----------左侧角色--------->
     <div class="role-left-tb">
         <div class="role-title">
            <span style="float:left;margin-top:20px;">角色</span>
             <el-button type="text" @click="dialogVisible = true"  style="float:right;margin-top:15px;">+Add RoLES</el-button>
         </div>
         <ul class="role-ul">
             <li v-for="obj in list" :key="obj.roleId"><div class="role-span">{{obj.roleName}}</div>  
             <div class="role-log">    
              <img @click="open" style="cursor: pointer;" src="https://www.pmdaniu.com/storages/127496/5e1a546311e3b27aa7a6b6b7fb02a8bc-57026/images/%E6%96%B0%E5%A2%9E%E6%9C%8D%E5%8A%A1%E5%8C%85/u6937_mouseOver.png" alt="">
              <img  @click="deleteRoleId(obj.roleId)" src="https://www.pmdaniu.com/storages/127496/5e1a546311e3b27aa7a6b6b7fb02a8bc-57026/images/%E6%96%B0%E5%A2%9E%E6%9C%8D%E5%8A%A1%E5%8C%85/u6935_mouseOver.png" alt="" style="margin:0 20px;">
              </div>  
              </li>
         </ul>
     </div>
     <!-------------右侧--------------->
     <div class="role-man-right">
           <div style="margin:20px 20px;">
            <span>管理角色权限</span>
         </div>
         <!---------复选框表格-------->
         <div class="check-tb">
             <br>
              <br>
               <el-checkbox  v-model="checkAll" @change="handleCheckAll">全选</el-checkbox>
              <br>
              <br>
              
              <el-checkbox  v-model="checkAllOne" @change="handleCheckAllChange">框架</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
          </el-checkbox-group>
             <br>
              <br>
              <el-checkbox  v-model="checkAlltool" @change="handleCheckAlltool">模型管理</el-checkbox>
            <div style="margin: 20px 20px;"></div>
            <el-checkbox-group v-model="checkedtool">
                <el-checkbox v-for="tool in cities1" :label="tool" :key="tool">{{tool}}</el-checkbox>
            </el-checkbox-group>
            <br>
              <br>
              <el-checkbox  v-model="checkAllThree" @change="handleCheckAllThree">一线城市</el-checkbox>
            <div style="margin: 20px 20px;"></div>
            <el-checkbox-group v-model="checkedThree">
                <el-checkbox v-for="two in cittwo" :label="two" :key="two">{{two}}</el-checkbox>
            </el-checkbox-group>
            <br>
              <br>
              <el-checkbox  v-model="checkAllFour" @change="handleCheckAllFour">新一线城市</el-checkbox>
            <div style="margin: 20px 20px;"></div>
            <el-checkbox-group v-model="checkedFour">
                <el-checkbox v-for="three in citthree" :label="three" :key="three">{{three}}</el-checkbox>
            </el-checkbox-group>
         </div>
     </div>
</div> 
<br>
  </div>
  <!----------------新增弹框-------------------->
   <el-dialog
        title="编辑角色信息"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <el-form :model="roleList" label-width="120px">
          <el-form-item label="角色名称">
            <el-input v-model="roleList.roleName" style="width: 80%" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="角色介绍">
            <el-input v-model="roleList.roleIntroduce" style="width: 80%"  :rows="5" type="textarea" placeholder="请输入"></el-input>
          </el-form-item>
            <el-form-item label="创建时间">
            <el-date-picker v-model="roleList.roleDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable type="date" :picker-options="startDatePicker"></el-date-picker>
          </el-form-item>
          <el-form-item label="创建人">
             <el-input v-model="roleList.establishMan" style="width: 40%" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
          </span>
        </template>
      </el-dialog>
</div>
    

</template>


<script>

import axios from 'axios'
 var cityOptions = ['Spring','SpringMVC','SpringBoot','SpringCloud',];
 var cityOptions1 = ['过程模型', '算法模型', '统计模型', '仿真模型'];
 var cityOptions2 = ['上海','深圳', '广州','青岛' ];
 var cityOptions3 = [ '重庆','杭州','成都','南京' ];
export default {
data () {
    return {
       dialogVisible: false,//定义弹框
       roleList:{
        roleName: "",
        roleIntroduce: "",
        roleDate: "",
        establishMan:""
      },
        /**********复选框************** */      
         checkAll: false,
         checkAlltool:false,
         checkAllOne:false,
        checkedCities: [],
         checkedtool: [],
         checkedThree: [],
         checkedFour: [],
        cities: cityOptions,
         cities1: cityOptions1,
         cittwo:cityOptions2,
         citthree:cityOptions3,
        isIndeterminate:true,
        list:[]
    }
    
},
  created () {
    this.findRoleList()
  },


methods: {
open(){
  this.dialogVisible=true;
},

  //查询所有角色
  findRoleList(){
    axios({
      url: "/api/install/getRoleList",
    }).then((res) =>{
      console.log(res);
      this.list=res.data.data
    })
  },
      
//复选框
handleCheckAll(val){


this.handleCheckAllChange(val);
    this.handleCheckAlltool(val);
this.handleCheckAllThree(val);
this.handleCheckAllFour(val);


},
 handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
handleCheckAlltool(val) {
        this.checkedtool = val ? cityOptions1 : [];

      },
handleCheckAllThree(val){
    this.checkedThree = val ? cityOptions2 : [];
},
handleCheckAllFour(val){
     this.checkedFour = val ? cityOptions3 : [];
},

  //新增角色
  save(){
    axios({
      url: "/api/install/addRole",
       params: 
          this.roleList
    }).then(res=>{
        console.log(res.data)
        this.$message('新增成功')
        this.roleList = ''
        this.dialogVisible=false;
        this.findRoleList()
    })
  },
  deleteRoleId(roleId){
    // alert(roleId)
     console.log(roleId); 
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          let that = this; //改变this指向
          axios
            .get("/api/install/deleteRoleId", {
              params: {
                id: roleId,
              },
            })
            .then(function (res) {
              //判断success是否为true
              if (res.succeed === false) {
                that.$message({
                  type: "info",
                  message: "删除失败!",
                });
              } else {
                that.$message({
                  type: "success",
                  message: "删除成功!",
                });
                that.findRoleList()
              }
            })
            .catch(function (reason) {
              console.log(reason);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
  }
},
}
</script>


<style>
body{
  height:100%;
  background-color: #f2f7fb;
}
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
/* .to-sign-up {
  width: 100%;
  padding-bottom: 1cm;
  background-color: #f2f7fb;
} */
.res-add-one {
  width: 1150px;
  

margin: 0 auto;

  background-color:#fff;
}
/**标题蓝色部分 *************/
.header_2 ul {
  width: 95%;
  height: 50px;
  /* background-color: black; */
  /**设置成为弹性容器**/
  /* display: flex; */
  padding-top: 20px;
  margin-left: 30px;
}
.header_2 ul li{
float: left;
}
.header_2 ul p {
  font-size: 22px;
}
.head-font {
  background-color: #0066ff;
  width: 7px;
  height: 25px;
  border-radius: 10px;
}
/*********底部表格******** */
.res-add-two{
    display: flex;
    width:95%;
   padding-bottom: 1cm;
    margin: 0 auto;

}
.role-left-tb{
    width: 300px;
    height: 600px;
    border: 1px solid #f2f7fb;
    border-radius: 1%;
}
.role-man-right{
    width: 785px;
    height: 600px;
     border: 1px solid #f2f7fb;
    border-radius: 1%;
    margin-left: 20px;
}
.role-title{
    width:260px;
    height: 60px;
    margin:0px auto;

}
.role-ul li{
           width:300px;
    height:40px;

}
.role-span{
    margin-left:20px;
    padding-top: 10px;
    font-size: 13px;
    float: left;
}
.role-log{
    padding-top:10px;float:right;
    display: none;
}
.role-ul li:hover .role-log{
   display: block;
   
}
.role-ul li:hover{
   background-color: #F2F7Fb;
   
}
.check-tb{
    width: 96%;
    height:500px;
    border-top: 1px solid #F2F7Fb;
    margin: 0 auto;

}
</style>